﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>广告位</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/style/admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" src="/style/admin/js/jquery-2.1.4.min.js" ></script>
    </head>
    <body>
        <div class="wrap">
            <div class="page-title">
                <span class="modular fl"><i class="settings"></i><em>轮播图列表</em></span>
            </div>
            <form action="/admin/ads/store" method="POST" enctype="multipart/form-data">
                  {{ csrf_field() }}
                <table class="noborder">
                    <tr>
                        <td style="width:15%;text-align:right;"><b>title：</b></td>
                        <td> 
                            <input name="title" type="text" /> 
                        </td>
                    </tr> 
                    <tr>
                        <td style="text-align:right;"><b>链接：</b></td>
                        <td><input name="href" type="text"  /></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;"><b>排序：</b></td>
                        <td><input name="sort" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">图片上传：</td>
                        <td>
                            <input type="file" accept="image/*" id="up_img" name="photo"  onchange="fileUpLoad(this);" class="hide"/>
                            <label for="up_img" class="labelBtnAdd">+</label>
                            <div id="showImg"> 
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;"></td>
                        <td><input type="submit" value="保存" class="tdBtn"/></td>
                    </tr>
                </table>
            </form>
        </div>
       <script>
            //主图上传容器
        var imgCont = document.getElementById("showImg");
        var ipt = document.getElementById("up_img");
        
        function fileUpLoad(_this) {//主图上传方法
            var file = _this.files[0];
            if (!FileReader) {
                alert("你的浏览器不支持H5的FileReader");
                ipt.setAttribute("disabled", "disabled");//浏览器不支持禁用input type='file'文件上传标签  
                return;
            }
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);//将文件读取为Data URL 读取结果放在result中  
            fileReader.onload = function (e) {
                var img = '<img src="' + this.result + '"/ width=60 height=60>';
                imgCont.innerHTML = img;
                console.log(this.result);
            }
        }
       </script>
    </body>
</html>